<template>
	<!-- <view> -->
		<!-- <num-select @getValue="getValue" v-model="data" ></num-select> -->
		<!-- <text v-model="shopid">{{shopid}}</text> -->
		
	<!-- </view> -->
	<scroll-view class="container" scroll-y="true">
		<view class="title">
			<!-- <text v-model="bug" style="font-size: 5px;">{{bug}}</text> -->
			<image v-bind:src="details[0]" class="shoplogo"></image>
			<view class="shopnameHead">
				<!-- <text v-model="test">{{test}}</text> -->
				<text v-model="shopname">{{shopname}}</text>
				
				
			</view>
			
		</view>
	
		<view class="products" v-for="item in products">
			<view class="product">
				<image v-bind:src="item.thingpic" class="productPic"></image>
				<!-- <image src="http://192.168.137.1:8080/image/03e7cfc6-1ad1-11eb-9902-02004c4f4f50/hanbao.png" class="productPic"></image> -->
				<view class="textview">
					<text class="name">{{item.thingname}}</text>
					<text class="desc">{{item.thingdesc}}</text>
					<text class="price">￥{{item.thingprice}}</text>
				</view>
				
				<view class="numberview">
					<num-select class="number" @modify="modify" v-bind:itemprice="item.thingprice" v-bind:itemid="item.thingid" v-bind:itempic="item.thingpic" v-bind:itemname="item.thingname"></num-select>
				</view>
				
				
			</view> 
			
		</view>
		
		<view style="width: 100%; height: 120px; background-color: #F4F4F4;" ></view>
		
		<view class="bottombar"> 
			<text class="t-icon t-icon-hezi hezi"></text>
			
			<view class="dot">
				<view>
					<uni-badge v-bind:text="totalcount" type="error" size="small"></uni-badge>
				</view>
				<view class="allprice">
					<text style="color: #808080;font-size: 12px;" v-show="tips">未选购商品</text>
					<text  v-model="totalprice" v-show="flag">￥{{totalprice}}</text>
				</view>
				 
			</view>
			
				<view class="button-sp-area">
					<button type="primary"   v-bind:style="submitstyle" v-bind:disabled="cannotsubmit"  @click="qujiesuan()">去结算</button>
				</view>
				

		</view>
		
	</scroll-view>
	
	
		
	
</template>

<script>
	import numSelect from "../../../components/poiuy-numSelect/numSelect.vue"
	import uniBadge from "../../../components/uni-badge/uni-badge2.vue"
	    export default {
			data(){
				return {
					shopid:"",//当前店铺id
					details:"",//商品列表
					shopname:"",//店铺名称
					products:"",
					totalcount:0,
					totalprice:"",
					flag:false,
					tips:true,
					list:[],
					bug:"",
					test:"",
					
					// 提交按钮的颜色和可不可以点的动态绑定
					submitstyle:"border-radius: 40px;width:100px;height: 35px;padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom=0px;font-size: 15px;background-color: #808080; color: #FFFFFF;",
					cannotsubmit:true,
					
					
				}
			},
	        components: {
	            numSelect,uniBadge
	        },
			onLoad() {
				if(this.totalprice==0){
					this.flag=false
					this.tips=true
				}
				else{
					this.flag=true
					this.tips=false
				}
			},
			methods:{
			
				
				modify(res,itemprice,itemid,currentnum,itempic,itemname){
				
				
					
					this.bug=this.list
					
					
					
					this.tips=false
					
					if(res=="add"){
	
						this.totalcount+=1
						this.totalprice=this.NumberAdd(itemprice,this.totalprice)
						this.flag=true
						
						if(this.totalcount==0){
							this.cannotsubmit=true
							this.submitstyle="border-radius: 40px;width:100px;height: 35px;padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom=0px;font-size: 15px;background-color: #808080; color: #FFFFFF;"
						}
						else{
							this.cannotsubmit=false
							this.submitstyle="border-radius: 40px;width:100px;height: 35px;padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom=0px;font-size: 15px;background-color: #51b3f6; color: #FFFFFF;"
							
						}
						
						
						var indexflag=""
						
						if(this.list.length==0){
							indexflag="new"
							this.test="数组长度为0"
						}
						else{
							for(var i=0;i<this.list.length;i++){
								if(this.list[i].itemid==itemid){
									indexflag="add"
									this.test="数组中已存在该物品，添加"
									break;
								}
								else{
									indexflag="new"
									this.test="数组中不在此物，新增"
									
								}
							}
						}
					
					
						
						
						
						if(indexflag=="new"){
							uni.showToast({
								title:indexflag
							})
							//新增商品
							this.list.push({
								"itemid":itemid,
								"itemprice":itemprice,
								"currentnum":currentnum,
								"itempic":itempic,
								"itemname":itemname
							})
							indexflag=""
						}
						else{
							//添加数量
							uni.showToast({
								title:indexflag
							})
							var index2 = this.list.findIndex(item => {
							       if (item.itemid == itemid) {
							            return true
							            }
							          })
							this.list.splice(index2,1)
							
							this.list.push({
								"itemid":itemid,
								"itemprice":itemprice,
								"currentnum":currentnum,
								"itempic":itempic,
								"itemname":itemname
							})
							indexflag=""
						}
				
					
					}
					else{
						this.totalcount-=1
						this.totalprice=this.NumberSub(this.totalprice,itemprice)
						
						if(this.totalcount==0){
							this.cannotsubmit=true
							this.submitstyle="border-radius: 40px;width:100px;height: 35px;padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom=0px;font-size: 15px;background-color: #808080; color: #FFFFFF;"
						}
						else{
							this.cannotsubmit=false
							this.submitstyle="border-radius: 40px;width:100px;height: 35px;padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom=0px;font-size: 15px;background-color: #51b3f6; color: #FFFFFF;"
							
						}
						
						if(currentnum==0){
							var index3 = this.list.findIndex(item => {
							       if (item.itemid == itemid) {
							            return true
							            }
							          })
							this.list.splice(index3,1)
						}
						else{
							var index4 = this.list.findIndex(item => {
							       if (item.itemid == itemid) {
							            return true
							            }
							          })
							this.list.splice(index4,1)
							
							this.list.push({
								"itemid":itemid,
								"itemprice":itemprice,
								"currentnum":currentnum,
								"itempic":itempic,
								"itemname":itemname
							})
						}
						
						
						
						
						
						
						
						
						if(this.totalprice==0){
							
							this.flag=false
							this.tips=true
						}
						else{
							
							this.flag=true
						}
					}
				
				},
				qujiesuan(){

					var json=JSON.stringify(this.list)
					uni.navigateTo({
						url:"./confirmOrder?order="+json+"&shopname="+this.shopname+"&totalPrice="+this.totalprice+"&shopid="+this.shopid+"&totalcount="+this.totalcount
						
					});
				}
				
				
				
				
			},
			onLoad:function(option){
	
					this.shopid=option.shopuuid
					this.shopname=option.shopname
					
					
					uni.request({
						url:getApp().globalData.http+"/shop/shopdetail",
						method:"GET",
						data:{
							shopid:this.shopid
						},
						header:{
							'content-type':"application/x-www-form-urlencoded",
							"Authorization":uni.getStorageSync("token")
						},
						success: (res) => {
							this.details=res.data
							this.products=JSON.parse(this.details[1])
							
						}
					})
			},
			//监听页面返回，即卸载
			onUnload() {
			
				uni.request({
					url:getApp().globalData.http+"/shop/AddToThisShop_Car",
					method:"POST",
					data:{
						data:JSON.stringify(this.list)
					},
					header:{
						'content-type':"application/x-www-form-urlencoded",
						"Authorization":uni.getStorageSync("token")
					},
					success: (res) => {
						uni.showToast({
							title:res.data
						})
					}
				})
				
				
			}
			
			
			
			}
</script>

<style scoped>
	.container{
		width: 100%;
		height: 100%;
		overflow: hidden;
		/* background-color: #F4F4F4; */
		
		background-image: url(../../../static/bk1.jpg);
		background-position: top;
		background-color: #F4F4F4;
		background-repeat: no-repeat;
		background-size: 100% 160px;
		
	}
	.products{
		/* height: 100%; */
		/* height: auto; */
		/* width: 100%; */
		border: #000000;
		/* margin-top: 10px; */
		overflow: hidden;
		/* margin-left: 10px;
		margin-right: 10px; */
		/* margin-top: 10px; */
		
	
	}
	.product{
		width: 100%;
		height: 120px;
		background-color: #F4F4F4;
		/* border-radius: 15px; */
		display: flex;
		flex-direction: row;
		overflow: hidden;
		
		
		
		
	}
	.productPic{
		width: 100px;
		height: 95px;
		border-radius: 15px;
		margin: 10px;
	}
	.textview{
		display: flex;
		flex-direction: column;
		
		margin-top: 10px;
		margin-bottom: 10px;
		margin-right: 10px;
		
		background-color: #F4F4F4;
		width: 44%;
	}
	.numberview{
		background-color: #F4F4F4;
		width: 20%;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		
		/* height: 100px; */
		/* float: right; */
	}
	.name{
		
		font-size: 17px;
		color: #000000;
	}
	.desc{
		margin-top: 1px;
		font-size: 12px;
		color: #999999;
	}
	.price{
		margin-top: 20px;
		font-size: 15px;
		color: #CC0000;
	}
	.number{
		width: 75px;
		
	}
	
	.title{
		height: 140px;
		background-color: #FFFFFF;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: row-reverse;
		align-items: center;
		border-radius: 15px;
		margin-top: 95px;
		
		margin-left: 10px;
		margin-right: 10px;
		
	}
	.shoplogo{
		width: 100px;
		height: 100px;
		border-radius: 15px;
		margin-right: 25px;
		border: #000000 1px solid;
		background-color: #000000;
	}
	.shopnameHead{
		width: 200px;
		height: 100px;
		/* background-color: #FFFFFF; */
		margin-right: 50px;
		margin-top: 5px;
	}
	.shopnameHead text{
		font-size: 20px;
	}
	
	.bottombar{
		width: 100%;
		/* height: 50px; */
		background-color: #fafafa;
		/* background-color: #000000; */
		
		position: fixed;
		
		bottom: var(--window-bottom);
		display: flex;
		flex-direction: row;
		align-items: center;
	
	}
	.hezi{
		/* background-color: #007AFF; */
		background-repeat: no-repeat;
		padding-left: 15px;
		width: 42px;
		height: 48px;
		margin-left: 20px;
		margin-top: 10px;
	}
	.dot{
		/* background-color: #007AFF; */
		display: flex;
		flex-direction: column;
		margin-bottom: 5px;

	}
	.allprice{
		margin-left: 22px;
		padding-bottom: 5px;
		
	}
	/* .gotojiesuan{
		background-color: #078A05;
		height: 45px;
		width: 100px;
	} */
	.button-sp-area {
	    margin: 0 auto;
	    /* width: 30%; */
		/* background-color: #000000; */
		margin-left: 70%;
		position: fixed;
		
		
		
	}
	
	
</style>
